<template>
  <div
    v-if="imgUrls && imgUrls.length"
    class="banner"
  >
    <!-- 轮播图 -->
    <swiper
      class="custom-swiper swiper-box"
      indicator-dots="true"
      autoplay="true"
      interval="3000"
      duration="1000"
      circular="true"
      @change="swiperChange"
    >
      <block
        v-for="(item, index) in imgUrls"
        :key="index"
      >
        <swiper-item>
          <image
            :src="item.bannerUrl + '?x-oss-process=image/resize,m_fill,h_358,w_640,limit_0/format,jpg'"
            class="slide-image"
            :class="{ leactive: nowIdx != index }"
            @click="jumpTo(item)"
          />
        </swiper-item>
      </block>
    </swiper>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
defineProps({
  imgUrls: {
    type: Array,
    default: () => {
      return []
    }
  }
})
const nowIdx = ref(0)
const swiperChange = () => {}
const jumpTo = () => {}
</script>

<style lang="scss">
.banner {
  min-height: 210px;
  background: white;
  .swiper-box {
    height: 210px;
    margin: 0 auto;
    ._swiper-item {
        text-align: center;
    }
    .slide-image {
        width: 100%;
        height: 210px;
    }
  }
}
</style>
